<template>
  <section id="article-header" class="mb-8">
      <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-gray-900 leading-tight mb-4 text-balance">
          {{ info.title }}
      </h1>
      <div class="bg-blue-50 border-l-4 border-primary p-4 text-gray-700 italic">
          {{ info.abstract }}
      </div>
  </section>
  <section id="article-content" class="bg-white rounded-xl shadow-sm p-6 sm:p-8 mb-8">
    <!-- 目录导航 -->
    <div class="mb-8 p-4 bg-gray-50 rounded-lg border border-gray-200">
      <h3 class="font-semibold text-gray-800 mb-2 flex items-center">
        <i class="fa fa-list-ul mr-2 text-primary"></i> 文章目录
      </h3>
      <ul class="space-y-1 text-sm">
        <li v-for="(item, index) in tableOfContents" :key="index">
          <a :href="item.href" class="block text-gray-600 hover:text-primary transition-colors py-1"
            :class="{ 'text-primary font-medium': activeHeadingId === item.href.replace('#', '') }">
            {{ item.title }}
          </a>
        </li>
      </ul>
    </div>

    <!-- 正文内容 -->
    <div class="prose prose-lg max-w-none">
      <ContentRenderer :content="content" ref="contentRenderer" @active-heading-change="handleActiveHeadingChange"
        @content-rendered="handleContentRendered" />
    </div>

    <!-- 阅读辅助工具 -->
    <div class="mt-10 pt-6 border-t flex justify-between items-center">
      <div class="flex space-x-3">
        <button class="p-2 text-gray-500 hover:text-primary transition-colors" title="字体变小" @click="decreaseFontSize">
          <i class="fa fa-font text-sm"></i>
        </button>
        <button class="p-2 text-gray-500 hover:text-primary transition-colors" title="字体变大" @click="increaseFontSize">
          <i class="fa fa-font text-lg"></i>
        </button>
        <button class="p-2 text-gray-500 hover:text-primary transition-colors" title="适合阅读的字体"
          @click="toggleReadingMode">
          <i class="fa fa-book"></i>
        </button>
      </div>
      <button
        class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors flex items-center"
        @click="handlePrintClick">
        <i class="fa fa-print mr-2"></i> 打印本文
      </button>
    </div>
  </section>
  <!-- 目录悬浮窗（移动端） -->
  <div class="fixed bottom-6 right-6 lg:hidden z-30">
    <button id="tocToggle"
      class="w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center">
      <i class="fa fa-list-ul"></i>
    </button>
    <div id="tocMenu"
      class="hidden absolute bottom-14 right-0 w-64 bg-white rounded-lg shadow-xl p-4 border border-gray-200">
      <h4 class="font-medium text-gray-900 mb-3">文章目录</h4>
      <ul class="space-y-2 text-sm max-h-60 overflow-y-auto">
        <li v-for="(item, index) in tableOfContents" :key="index">
          <a :href="item.href" class="text-gray-600 hover:text-primary transition-colors block py-1">
            {{ item.title }}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ContentRenderer from './ContentRenderer.vue';
import { articleInfo, articleContent, tableOfContents } from './ArticleData.js';

export default {
  name: 'ArticleContent',
  components: {
    ContentRenderer
  },
  props: {
    info: {
      type: Object,
      default: () => articleInfo
    },
    content: {
      type: Array,
      default: () => articleContent
    },
    tableOfContents: {
      type: Array,
      default: () => tableOfContents
    }
  },
  data() {
    return {
      activeHeadingId: '',
      currentFontSize: 18, // 基础字体大小(px)
      readingMode: false
    };
  },
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'ArticleContent',
      displayName: '文章内容',
      description: '显示文章内容和目录的组件',
      icon: 'fa-file-text-o',
      category: '文章组件',
      version: '1.0.0',
      isContainer: false
    },
    configPanel: [
      {
        title: '基础配置',
        fields: [
          {
            name: 'content',
            label: '文章内容',
            type: 'array',
            description: '文章的具体内容',
            required: true
          },
          {
            name: 'tableOfContents',
            label: '文章目录',
            type: 'array',
            description: '文章的目录结构',
            required: false
          }
        ]
      }
    ],
    events: [
      {
        name: 'printClick',
        label: '打印按钮点击',
        description: '用户点击打印按钮时触发'
      },
      {
        name: 'fontSizeChange',
        label: '字体大小改变',
        description: '用户调整字体大小时触发'
      },
      {
        name: 'readingModeToggle',
        label: '阅读模式切换',
        description: '用户切换阅读模式时触发'
      },
      {
        name: 'activeHeadingChange',
        label: '当前章节改变',
        description: '用户滚动到不同章节时触发'
      }
    ],
    actions: [
      {
        name: 'setContent',
        label: '设置内容',
        description: '设置文章的内容',
        parameters: [
          {
            name: 'content',
            type: 'array',
            required: true,
            description: '新的文章内容'
          }
        ]
      },
      {
        name: 'printArticle',
        label: '打印文章',
        description: '触发文章打印功能'
      }
    ]
  },
  methods: {
    // 组件方法实现
    setContent(newContent) {
      this.content = newContent;
    },
    printArticle() {
      window.print();
    },
    // 处理当前活动章节改变
    handleActiveHeadingChange(headingId) {
      this.activeHeadingId = headingId;
      this.$emit('active-heading-change', headingId);
    },
    // 处理内容渲染完成
    handleContentRendered() {
      // 可以在这里添加初始化逻辑
    },
    // 减小字体大小
    decreaseFontSize() {
      if (this.currentFontSize > 12) {
        this.currentFontSize -= 2;
        this.applyFontSize();
        this.$emit('fontSizeChange', this.currentFontSize);
      }
    },
    // 增加字体大小
    increaseFontSize() {
      if (this.currentFontSize < 28) {
        this.currentFontSize += 2;
        this.applyFontSize();
        this.$emit('fontSizeChange', this.currentFontSize);
      }
    },
    // 应用字体大小
    applyFontSize() {
      const contentElement = document.querySelector('#article-content .prose');
      if (contentElement) {
        contentElement.style.fontSize = `${this.currentFontSize}px`;
      }
    },
    // 切换阅读模式
    toggleReadingMode() {
      this.readingMode = !this.readingMode;
      const contentElement = document.querySelector('#article-content');
      if (contentElement) {
        if (this.readingMode) {
          contentElement.classList.add('bg-gray-50', 'max-w-3xl', 'mx-auto');
        } else {
          contentElement.classList.remove('bg-gray-50', 'max-w-3xl', 'mx-auto');
        }
      }
      this.$emit('readingModeToggle', this.readingMode);
    },
    // 处理打印按钮点击
    handlePrintClick() {
      this.$emit('printClick');
      this.printArticle();
    }
  }
};
</script>

<style scoped>
/* 组件样式可以在这里添加 */
</style>